<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>成长记录</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" type="text/css" href="#(CPATH)/_view/static/css/common.css">
  <link rel="stylesheet" type="text/css" href="#(CPATH)/_view/static/css/center.css">
  <link rel="stylesheet" type="text/css" href="#(CPATH)/_view/static/layer_mobile/need/layer.css">
  <link rel="stylesheet" type="text/css" href="#(CPATH)/_view/static/css/newLook.css">
  
  <link rel="stylesheet" href="#(CPATH)/_view/static/weui/style/weui.css">
    <link rel="stylesheet" href="#(CPATH)/_view/static/weui/example/example.css">
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
    
  <script type="text/javascript" src="#(CPATH)/_view/static/js/jquery.min.js"></script>
  <script type="text/javascript" src="#(CPATH)/_view/static/js/fontRem.js"></script>
  <script type="text/javascript" src="#(CPATH)/_view/static/js/common.js"></script>
  <script type="text/javascript" src="#(CPATH)/_view/static/layer_mobile/layer.js"></script>
  <link rel="stylesheet" href="#(CPATH)/_view/static/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  
  <style type="text/css">
	.img_class {
		border-top-width: 2px;
	    margin-top: 2px;
	    padding-bottom: 0px;
	    margin-left: 2px;
	    margin-right: 2px;
	    margin-bottom: 2px;
	    height: 100px;
	    width: 100px;
	}
	
	</style>
</head>
<body>
<div class="weui-gallery" id="gallery">
            <span class="weui-gallery__img" id="galleryImg"></span>
            
        </div>
<div class="" id="LAY_demo1">
	
</div>
 
<div class="telPhoneWrap"><a href="javascript:add()" class="icon-16 telPhone"></a></div>
          
          
<script src="#(CPATH)/_view/static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

var $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
$uploaderFiles = $("#LAY_demo1"),
tmpl = 'background-image:url(#url#)',
pageNum = 1;
;

$uploaderFiles.on("click", "img", function(){
	var urlStr = tmpl.replace('#url#', this.getAttribute("src"));
    $galleryImg.attr("style", urlStr);
    $gallery.fadeIn(100);
});
$gallery.on("click", function(){
    $gallery.fadeOut(100);
});

layui.use('flow', function(){
  var flow = layui.flow;
  var totalPage = 0;
 
  flow.load({
    elem: '#LAY_demo1' //流加载容器
    ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
    ,done: function(page, next){ //执行下一页的回调
      
      //模拟数据插入
      setTimeout(function(){
        var lis = [];
        $.ajax({
    		type: "post",
    		url: "#(CPATH)/animalRecord/list",
    		data: {
    			  "pageNumber": pageNum
    			  ,"animal_id": #(animal_id)
    		},
    		dataType: "JSON",
    		async: false,
    		success: function(data) {
    			pageNum = pageNum + 1;
    			totalPage = data.totalPage;
    			var datalist = data.list;
    			for(var i = 0; i < datalist.length; i++) {
    				var record = datalist[i];
    				var remark = '';
    				
    				var str = '<div class="listWrap">'
          	          + '<fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px; margin-bottom: 5px;">'
          	          + '<legend>'+ record.record_date + '</legend>'
          	          + '</fieldset>'
          	          + '<div class="houseIterm clearfix" style="padding-top: 0px;">';
    				if(record.remark != null){
    					str += record.remark+ '<BR/>';
    				}
          	        var urls = record.pics.split(",");
          	        for(var j=0;j<urls.length;j++){
          	        	if(urls[j] != ''){
          	        		str += '<img src="#(CPATH)' + urls[j] +'"  class=" img_class">';
          	        	}
          	        }
          	        str += '</div></div>';
          			lis.push(str)
    			}
    		},
    		error: function() {}
    	});
        
        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
        next(lis.join(''), page < totalPage); //假设总页数为 10
      }, 500);
    }
  });
  
  
});
</script>
<script>
function add(){
	 window.location.href = '#(CPATH)/animalRecord/forward?animal_id=' + #(animal_id);
}
</script>
</body>
</html>